<template>
    <div class="grid-content bg-purple"
         style="background-color: #146dbe;border-radius: 10px;height: 200px;box-shadow: 0 0 1.5rem rgba(9,41,77,0.12);">
        <div v-loading="loadingWeather"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)">

            <div class="weather">
                <div class="weather-header">
                    <p class="weather-header-left" style="font-size: 14px">
                        <span class="city">{{this.city}}</span>
                        <span>
                            今天：
                            <img v-if="this.todayWeather.pic"  style="width: 24px;height: 24px"  :src="this.todayWeather.pic"/>
                                    {{this.todayWeather.weather}}
                                    <span>{{this.todayWeather.temperature}}</span>
                                    <span>{{this.todayWeather.direct}}</span>
                                    <span>{{this.todayWeather.power}}</span>
                                </span>
                    </p>
                    <p class="weather-header-right" style="font-size: 14px">
                        <span>{{this.todayWeather.date}}</span>
                        <span>{{this.day}}</span>

                    </p>
                </div>
                <div class="weather-content">
                    <div class="weather-content-left">
                        <span class="weather-content-temperature">{{this.realtime.temperature}}°</span>
                    </div>
                    <div class="weather-content-right">
                        <div class="weather-content-pm25" :class="{'green':this.pm25==='优'||this.pm25==='良好','orgin':this.pm25==='轻度污染','red':this.pm25==='中度污染','zred':this.pm25==='重度污染'}">
                            <span>{{this.realtime.aqi}}</span>
                            <span>{{this.pm25}}</span>
                        </div>
                        <div class="weather-content-wind">
                            <img v-if="this.realtime.pic" style="height: 20px;width: 20px;margin-right: 5px" :src="this.realtime.pic" />
                            <span>{{this.realtime.info}}</span>
                            <span>{{this.realtime.direct}}</span>
                            <span>{{this.realtime.power}}</span>
                        </div>
                    </div>
                </div>
                <div class="weather-footer">
                    <span>湿度</span>
                    <span>{{this.realtime.humidity}}</span>
                    <span>{{this.realtime.zwx}}</span>
                    <span>日出 | 日落</span>
                    <span>{{this.todayWeather.sun_begin_end}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import md5 from 'js-md5';
    export default {
        name: "weather",
        data() {
            return {
                loadingWeather: false,
                city: "", //城市
                realtime:{
                    info: "",//天气情况，如：晴、多云
                    temperature: "",//温度，可能为空
                    humidity: "",//湿度，可能为空
                    direct: "",//风向，可能为空
                    power: "",//风力，可能为空
                    aqi: "",//空气质量指数，可能为空
                    zwx:"",   //紫外线指数
                    pic:"" ,//天气小图标

                },
                todayWeather:{
                    date: "",
                    direct: "",
                    temperature: "",
                    weather: "" ,
                    power:"",
                    sun_begin_end:"", //日出|日落时间
                    pic:"",//天气图标
                },
                pm25:"",
                day:"",
                remind:""
            }
        },
        created() {
            // let str='needIndex1needAlarm1area'+`${this.city}`+'showapi_appid9064' +
            //     '421dbd7d16cd01452581a79f0aae74d070'
            // let sign=md5(str)
            this.getLocation();
        },
        methods:{
            getWeather(){
                this.loadingWeather = true;
                //area 城市名  needIndex  是否返回指数数据  1是0否  needAlarm  是否天气预警  1是 0否
                axios.get(
                    'https://route.showapi.com/9-2?showapi_appid=906442&showapi_sign=' +'1dbd7d16cd01452581a79f0aae74d070' +'&area='+`${this.city}`+'&needIndex=1&needAlarm=1'
                ).then((res) => {
                    this.loadingWeather = false;
                    if(res.data.showapi_res_code===0){
                        let todaydata=res.data.showapi_res_body.f1;
                        let nowdata=res.data.showapi_res_body.now;
                        this.todayWeather.weather=todaydata.day_weather;
                        this.todayWeather.temperature=todaydata.night_air_temperature+"°~"+todaydata.day_air_temperature+"°C";
                        this.todayWeather.direct=todaydata.day_wind_direction;
                        this.todayWeather.power=todaydata.day_wind_power;
                        this.realtime.aqi=nowdata.aqi;
                        this.realtime.temperature=nowdata.temperature;
                        this.realtime.info=nowdata.weather;
                        this.realtime.direct=nowdata.wind_direction;
                        this.realtime.power=nowdata.wind_power;
                        this.realtime.humidity=nowdata.sd;
                        this.pm25=nowdata.aqiDetail.quality;
                        this.realtime.zwx=todaydata.index.uv.desc;
                        this.todayWeather.sun_begin_end=todaydata.sun_begin_end;
                        this.todayWeather.pic=todaydata.day_weather_pic;
                        this.todayWeather.date=todaydata.day.substring(0,4)+"年"+todaydata.day.slice(4,6)+"月"+todaydata.day.slice(6)+"日"
                        this.day=todaydata.weekday;
                        switch (todaydata.weekday) {
                            case 7:
                                this.day='周日';
                                break;
                            case 1:
                                this.day='周一';
                                break;
                            case 2:
                                this.day='周二';
                                break;
                            case 3:
                                this.day='周三';
                                break;
                            case 4:
                                this.day='周四';
                                break;
                            case 5:
                                this.day='周五';
                                break;
                            case 6:
                                this.day='周六';
                                break;
                        }
                        this.realtime.pic=nowdata.weather_pic;
                    }
                }).catch((error) => {
                    //console.log(error);
                });
            },
            getLocation(){
                var native = new BMap.LocalCity();
                native.get(res=> {
                    this.city=res.name
                    this.getWeather()
                   /* alert(res.name);
                    alert("lat:" + res.center.lat + " lng:" + res.center.lng);*/

                });
            }

        }

    }
</script>

<style>
    span {
        margin: 0px 15px 0px 0px;
    }

    .weather {
        width: 875px;
        padding: 20px;
        margin: 0 auto;
        color: #e0e8f5;

    }

    .weather-header {
        height: 20px;
        line-height: 20px;
    }

    .weather-header-left {
        margin: 0;
        float: left;
    }

    .weather-header-right {
        margin: 0;
        float: right;
    }

    .city {
        font-size: 20px;
    }

    .weather-content {
        margin-top: 30px;
        height: 79px;
    }

    .weather-content-left {
        float: left;
    }

    .weather-content-right {
        margin-left: 30px;
        float: left;
        height: 53px;
        margin-top: 20px;
    }

    .weather-content-temperature {
        position: relative;
        font-size: 79px;
        line-height: 79px;
    }

    .weather-content-pm25 {
        display: inline-block;
        padding: 0 6px;
        height: 19px;
        line-height: 19px;
        font-size: 12px;
        border-radius: 9.5px;
        text-align: center;
    }

    .weather-content-wind {
        margin-top: 10px;
        line-height: 14px;
        font-size: 14px;
        vertical-align: middle;
    }

    .weather-footer {
        margin-top: 15px;
        line-height: 14px;
        font-size: 14px;
    }
    .green{
        background: rgb(130, 201, 30)
    }
    .orgin{
        background: rgb(255, 128, 41)
    }
    .red{
        background: rgb(222, 83, 81)
    }
    .zred{
        background: rgb(116, 37, 71)
    }
</style>